{% extends "base.html" %}

{% block content %}
<div class="lithum-table-header">
  
  <!-- table search -->
  <form class="layui-form lithum-table-search" action="">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">标签搜索</label>
          <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="">
              <option value="">直接选择或搜索选择</option>
              <option value="1">layer</option>
              <option value="2">form</option>
              <option value="20">radio</option>
            </select>
          </div>
      </div>        
    </div>
  </form>

  <!-- table actions -->
  <div class="layui-btn-group lithum-table-actions">
    <button class="layui-btn" data-type="getCheckData">获取</button>
    <button class="layui-btn" data-type="getCheckLength">获取</button>
    <button class="layui-btn" data-type="isAll">验证</button>
  </div>

</div>      

<!-- table -->
<table class="layui-table" lay-data="{url:'{{ table.data_url }}', page:true, id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
      {% for column in table.display_columns %}
        {% include "column.html" %}
      {% endfor %}
    </tr>
  </thead>
</table>
       
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
                 
{% endblock %}

{% block custom_js %}
<script>
  layui.use('table', function(){
    var table = layui.table;
    
    //监听表格复选框选择
          table.on('checkbox(demo)', function(obj){
            console.log(obj)
          });
          //监听工具条
          table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
              layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
              layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
              });
            } else if(obj.event === 'edit'){
              layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
          });
          
          var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
              var checkStatus = table.checkStatus('idTest')
              ,data = checkStatus.data;
              layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
              var checkStatus = table.checkStatus('idTest')
              ,data = checkStatus.data;
              layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
              var checkStatus = table.checkStatus('idTest');
              layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
          };
          
          $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
          });
        });
        </script>
{% endblock %}